
<template>
    <div class="practiceRule" v-for="(modeCodeItem, index) in modeCodeList" :key="modeCodeItem.id">
        <div style="white-space: pre-wrap;">{{modeCodeItem.practiceRuleText}}</div>
        <div class="margin-t-5px">
            <span v-for="item, index in modeCodeItem.practiceModeCodeList"
                :class="item == 'answer' ? 'labelIcon-primary' : 'labelIcon-yellow'">
                {{ item == 'answer' ? '答题' : '背题' }}
            </span>
        </div>
    </div>
    <!-- <span class="labelIcon-primary">上架</span> -->
</template>
<script setup>
import { onMounted } from 'vue'
const props = defineProps({ scope: { default: '' } })
let modeCodeList = computed(() => {
    // console.log(getscope, 'getscope')
    // if (props.scope.practiceModeCodeList.length > 1 || props.scope.practiceModeCodeList[0] == 'recitation') {
    //     props.scope.practiceModeCodeList[0] = 'answer'
    //     props.scope.practiceModeCodeList[1] = 'recitation'
    // }
    let modeCodeList = []
    //科目指定，循环科目
    modeCodeList.length = 0
    if (props.scope.practiceConfModeTypeCode == 'difference') {
        props.scope.practiceModeCodeList.length = 0;
        modeCodeList.unshift(props.scope) //添加标题科目指定，但是要把practiceModeCodeList置空，不然会多一个span标签
        modeCodeList.push(...props.scope.children)
    } else {
        modeCodeList.push(props.scope) 
    }
    

    resolveModeCodeText(modeCodeList)
    return modeCodeList

})

function resolveModeCodeText(modeCodeList) {
    modeCodeList.forEach(element => {
        if (element.practiceModeCodeList.length > 1 || element.practiceModeCodeList[0] == 'recitation') {
            element.practiceModeCodeList[0] = 'answer'
            element.practiceModeCodeList[1] = 'recitation'
    }
    });
    
}
</script>
<style lang="scss" scoped>
.practiceRule {
    display: flex;
    flex-direction: column;
    align-items: center;

    span {
        margin: 0 5px;
    }
}
</style>